<template>
	<view class="box">
		<view class="box_child">
			<!-- 首页搜索框 -->
			<view class="search">
				<u-search placeholder="快乐池塘小跳蛙" color="#666" disabled :showAction="false" height="20" @click="onClick">
				</u-search>
			</view>
			<!-- 弹出层的搜索页面 -->
			<u-popup :show="show" @close="close" @open="open" mode="right" transparent bgColor="#fff6ed"
				:safeAreaInsetBottom="false" duration=300 :overlay="false">
				<view class="content">
					<search :show="show" @onclickk="clickFn" :arr="arr" @clickIcon="onClickDelet"></search>
				</view>
			</u-popup>
			<!--首页轮播 -->
			<view class="banner">
				<u-swiper :list="list1" @change="change" @click="click" indicator height="130" margin="20rpx" radius="10" imgMode="aspectFill">
				</u-swiper>
			</view>
			<!-- 图片列表 -->
			<child @onclickTag="onClickTag"></child>
			<goodsList :list="hotList" :title="title[0]" ></goodsList>
			<goodsList :list="newList" :title="title[1]" ></goodsList>
			<goodsList :list="jpList" :title="title[2]" ></goodsList>
		</view>
		<tabbar :value1="0"></tabbar>
		
	</view>
</template>

<script>
	import child from '../../components/child/child.vue'
import search from '../../components/search/search.vue'
	export default {
		data() {
			return {
				hotList:[],
				newList:[],
				jpList:[],
				arr:[],
				show: false,
				title: ['热门推荐', '新品上架', '精品精选'],
				list1: []
			}
		},
		onLoad() {
			//发送请求获取首页数据
			uni.$u.http.get('/detailList',{params:{
				type:'春节',
				page:2,
				size:30
			}}).then(res =>{
				console.log(res);
				res.data.forEach((el,i) =>{
					if(i < 7){
						this.hotList.push(el)
					}else if(i>6 && i<14){
						this.newList.push(el)
					}else if(i>13 && i<21){
						this.jpList.push(el)
					}else{
						this.list1.push(el)
					}
				})
			})
			if(uni.getStorageSync('history')){
				this.arr = JSON.parse(uni.getStorageSync('history'))
				// console.log(123);
			}
			
			
		},
		methods: {
			open() {
				// 发送请求,获取搜索框的数据
			},
			close() {

			},
			change() {

			},
			click() {
				if(uni.getStorageSync('token')){
					uni.navigateTo({
						
						url:`/pages/topck/topck?type=${'其他'}`
					})
				}else{
					uni.showModal({
						title: '登录提示',
						content: '您还没有进行登录,是否进行登录',
						success: function (res) {
							if (res.confirm) {
								uni.switchTab({
									url:'/pages/user/user'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			onClick() {
				this.show = true
			},
			clickFn(e) {
				this.show = e
			},
			onClickTag(e) {
				// console.log(e);
				uni.reLaunch({
					url: `/pages/protection/protection?keyword=${e}`
				})
			},
			onClickDelet(e){
				uni.removeStorageSync(e)
				
			}
		},
		components: {
			child,
			search
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #faeef2;
	}

	.banner {
		padding: 0rpx 20rpx;
	}

	.search {
		padding: 20rpx;
	}

	.imgstyle {
		margin: 20rpx 20rpx;

	}

	.content {
		width: 100vw;
	}
	.box{
		padding-bottom: 80rpx;
	}
</style>
